<script setup>
import {getCurrentInstance, h, onMounted, ref, watch} from "vue";
import api from "@/request/apis.js";
import {post} from "@/config/Request.js";
import JsonEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';
import {Grid, GridItem} from "view-ui-plus";
import LogicFlow from "@logicflow/core";
import {nanoid} from "nanoid";
import {Control, Group, InsertNodeInPolyline, Menu, MiniMap, SelectionSelect} from "@logicflow/extension";
import squareLakePolylineEdge from "@/components/flow/edge/SquareLakePolylineEdge.js";
import SquareLakeMiss from "@/components/flow/node/SquareLakeMiss.js";
import {adapterOut} from "@/components/flow/adapter/SquareLakeFlowOutAdapter.js";
import {adapterIn} from "@/components/flow/adapter/SquareLakeFlowInAdapter.js";
import SquareLakeFlowNodeHover from "@/views/process/SquareLakeFlowNodeHover.vue";
import SquareLakeFlow from "@/views/process/SquareLakeFlow.vue";

const props = defineProps(["bizId", "bizType"]);
onMounted(() => {
  queryProcessInfo();
});

watch(() => props.bizId, (newValue, oldValue, onCleanup) => {
  queryProcessInfo();
}, {
  deep: true
});

const gridValue = ref([]);
const queryProcessInfo = async () => {
  if (!props.bizId) {
    return
  }
  const c = await api.queryProcessVersionRelationListByBizIdAndType(props.bizId, props.bizType);
  gridValue.value = c;
}

</script>

<template>
  <el-container>
    <el-main>
      <div v-for="value in gridValue" style="height: 300px;border-bottom: 1px solid #ccc;">
        <el-row>
          <el-col :span="24">
            <SquareLakeFlow :id="value.id" :params="value.params" :out-run-flag="true"></SquareLakeFlow>
          </el-col>
        </el-row>
      </div>

    </el-main>
  </el-container>


  <!--  </Grid>-->
</template>

<style scoped>

</style>